import React, { useEffect, useState, useMemo ,useReducer } from 'react';
import moment from 'moment';
import classNames from 'classnames';
import sdk from 'qcloud-iotexplorer-h5-panel-sdk';
import { useDeviceData } from '../hooks/useDeviceData';
import { Checkbox } from 'antd';
const CheckboxItem = Checkbox.CheckboxItem;
let myuserInfo = sdk.userInfo
import { IMGURL,APIURL,APPID,APPSECRET,forunit } from '../utils/common';
import {useHistory} from "react-router-dom";

const thirdUserNo = "para_user1"
export function CklsPage(props) {
	const [sdkReady, setSdkReady] = useState(false);
	const history = useHistory()
	const rtu = props.router
	let pagename = history.location.state.pagename
	let unit = history.location.state.unit
	const [tzl, settzl] = useState([]);
	const [tzinfo, settzinfo] = useState([]);
	var JkcardUdata
	const [isDateshow, setisDateshow] = useState(false);
	const [isshowdb, setisshowdb] = useState(false);
	const [ischecked, setischecked] = useState(false);
	
	const [state, {onDeviceDataChange,onDeviceStatusChange}] = useDeviceData(sdk);
	// 从云端获取到的属性枚举值
	const wulist =state.templateMap.weight_unit.define.mapping
	const unitindex = state.deviceData.weight_unit
	useEffect(() =>  {
		h5PanelSdk.sdkReady().then(() =>  setSdkReady(true));
		console.log("history")
		console.log(history.location.state)
	}, []);
	useEffect(() => {
		const getThirdUserData =() =>{
		  var request = require('superAgent')
		  request
		  .post(APIURL+'getThirdUserData_structure')
		  .send({
			"productId":sdk.productId,
			"deviceName":sdk.deviceName,
			"thirdUserNo":thirdUserNo,
			"wx_unionid":myuserInfo.UserID,
			"pageNo":1,
			"pageSize":10,
		  })
		  // .set('Content-Type', 'application/text')
		  .end(function(err, res){
			if(res.body.code == 1){
			  var _arry = []
			  JkcardUdata = res.body.data.data.reverse()
			  console.log('res',JkcardUdata)
			  if (JkcardUdata.length != 0){
				for(let i in JkcardUdata){
					_arry.push(JkcardUdata[i])
				}
			  }
			  console.log('_arry',_arry)
			  console.log('unit',unit)
			  settzl(_arry);//.reverse()
			}else{
			  console.log('服务器'+res)
			}
			console.log(res)
		  })
		}
		getThirdUserData()
		if(pagename == "duibi"){setisDateshow(true)} else {setisDateshow(false)}
	  }, [])
	const handleGoTo = (uid) => {
		console.log(uid)
		history.push('/SjfxPage',uid)
	}
	let dblist = []
	// 数组去重
	function unique (arr) {
		return Array.from(new Set(arr))
	}
	// function checkdata(e){
	// 	console.log(`checkdatachecked = ${e}`);
	// 	dblist.push(e)
	// 	dblist = unique(dblist)
	// }
	function Tzlist(props){
		const tzl = props.tzl
		function onChange(e){
			console.log(`onChangechecked = ${e}`);
			dblist =e
			if(dblist.length > 9){
				sdk.tips.confirm('最多支持9条数据！');
			}
			if(dblist.length >= 1){
				setisshowdb(true)
			}else{
				setisshowdb(false)
			}
		}
		return (
			<>
			<Checkbox.Group style={{ width: '100%' }} onChange={onChange} defaultValue={[]}>
			{tzl.map((tzlitem,i)=>
				<div className="lslist" key={i}>
					<div>
						<div className="jltime mgtb" key={tzlitem.data_time}>{moment(parseInt(tzlitem.data_time)).format("MM月DD日")}</div>
						{tzlitem.user_data.reverse().map((item,index)=>
							<div className="fl-rsbc bd1 pdtb" key={"Tzlitem"+index}>
								<div className="ilimg fl-rc">
									{isDateshow && <Checkbox value={item.id} className="mgr"></Checkbox>}
									<img src={IMGURL+"clls_ic_time@2x.png"} width="12px" className="mgr5"/>
									<span className="ttext">{item.option_time == null ?"08:00:02":moment(parseInt(item.option_time)).format(" HH:mm")}</span>
								</div>
								<div className="r-img fl-rc"  onClick={()=>handleGoTo(item.id)} >
									<Weightinfo weight={item.weight} weight_u={item.weight_u} wulist={wulist}/>
									<img src={IMGURL+"clls_btn_next@2x.png"}/>
								</div>
							</div>
						)}

					</div>
				</div>
			)}
			</Checkbox.Group>
		  </>
		);
	}
	async function ksdb(){
		dblist = unique(dblist)
		console.log("dblist"+dblist)
		if(dblist.length <= 0){
			await sdk.tips.confirm('请至少选择一条数据！');
		}else if(dblist.length > 9){
			await sdk.tips.confirm('最多支持9条数据！');
		}else{
			history.push('/DbfxPage',dblist)
		}
	}
	return !sdkReady ? <div > loading...</div >  : (
		<div className="cklsPage pdbfoot">
			<div className="navtit">查看历史</div>
			<div className={classNames('pd',{ 'pdb': isDateshow })}>
			{tzl.length == 0 || tzl[0] ==[]? "暂无数据！" : <Tzlist tzl={tzl}/>}
			{(isDateshow && isshowdb) && 
			<div className={classNames('dbfloatbtn')}>
				<div className="pdtb fl-cc">
					<div className="lfbtn" onClick={ksdb}>开始对比</div>
				</div>
			</div>}
			</div>
		</div>
	)
}
export function Weightinfo(props){
	const weight = props.weight
	const weight_u = props.weight_u == null || props.weight_u == "" ? 0 : props.weight_u
	const wulist = props.wulist
	const weightdata = forunit(weight,weight_u)
	return (
		<>
		<span className="sgcolor xbigtext mgr">{weight == null ?"00.00":weightdata.weight}
			<small className="tsize">
				{weight_u == null ? "KG" : wulist[weight_u]}(体重)
			</small>
		</span>
		</>
	)
}